Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', CMS.EXT_4_PATH + 'ux');
Ext.require([
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.form.*',    
    'Ext.ux.grid.FiltersFeature',    
    'Ext.ux.CheckColumn',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.ux.ProgressBarPager'
]);
//Dinh Nghia cac Model -------------------------
Ext.define('Page', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', mapping: 'id',type: 'number'},
        {name: 'title', mapping: 'title',type:'string'},
        {name: 'heading', mapping: 'heading',type:'string'},
        {name: 'meta_keyword', mapping: 'meta_keyword',type: 'string'},
        {name: 'description', mapping: 'description',type:'string'},
        {name: 'url', mapping: 'url',type: 'string'},        
        {name: 'template_id', mapping: 'template_id',type:'string'},
        {name: 'lang', mapping: 'lang',type: 'string'},
        {name: 'level', mapping: 'level',type:'number'},
        {name: 'is_cache', mapping: 'is_cache',type:'bool'},        
        {name: 'status', mapping: 'status',type:'bool'}
    ]
});
Ext.define('Language', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'code', mapping: 'code',type: 'string'},
        {name: 'name', mapping: 'name',type:'string'},       
    ]
});
Ext.define('Template', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', mapping: 'id',type: 'number'},
        {name: 'template_name', mapping: 'template_name',type:'string'},       
    ]
});
//Dinh nghia Store -----------------
Ext.define('TemplateStore', {
    extend: 'Ext.data.Store',
    model: 'Template',
    proxy: {
        type: 'ajax',
        url : CMS.BASE_URL+"admin/template/get-template-for-combobox",
        reader: {
            type: 'json',
            root: 'languages'
        }
    },    
    constructor : function (config) {
        Ext.apply(this, config);
        TemplateStore.superclass.constructor.call(this);      
    }   
});
Ext.define('LanguageStore', {
    extend: 'Ext.data.Store',
    model: 'Language',    
    proxy: {
        type: 'ajax',
        url : CMS.BASE_URL+"admin/lang/get-lang",
        reader: {
            type: 'json',
            root: 'languages'
        }
    },
    autoLoad:true,
    constructor : function (config) {
        Ext.apply(this, config);
        TemplateStore.superclass.constructor.call(this);
    }
});
//---------------------------
var templateStore = new TemplateStore();
var languageStore = new LanguageStore();
var myToolbar = Ext.create('Ext.toolbar.Toolbar', {
    items: [Ext.create('Ext.form.ComboBox',({
             triggerAction: 'all',
             lazyRender:false,
             width:40,
             mode: 'local',             
             store: new Ext.data.ArrayStore({
                fields: [
                          'id',
                          'value'
                         ],
                data: CMS.globalGridConfig.itemPerPageArray
             }),
             valueField: 'id',
             displayField: 'value',
             listeners:{
                  'select': function(combo,record ,index){
                        CMS.globalGridConfig.totalRow = combo.getValue();
                        store.reload({params:{start:0, limit: CMS.globalGridConfig.totalRow}});
                        pagingBar.pageSize = CMS.globalGridConfig.totalRow;
                        pagingBar.render()
                  }
             }
        })),'-',{
                    text: 'Add',
                    iconCls: 'silk-add',
                    handler: function(){
                    }
                },'-',{
                    text: 'Delete',
                    iconCls: 'silk-delete',
                    handler: function(){
                    }
                }
        ]
});
//---------------------------
var store = Ext.create('Ext.data.JsonStore', {        
        autoDestroy: true,
        model: 'Page',
        proxy: {
            type: 'ajax',
            url: requestUrl,
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',
                totalProperty: 'total'
            }
        },
        remoteSort: true,
        sorters: [{
            property: 'id',
            direction: 'ASC'
        }],
        pageSize: CMS.globalGridConfig.totalRow
    });
//---------------------------
var columns = [
 {header: 'ID',dataIndex: 'id',width:30,resizable:false},
 {header: 'Title',dataIndex: 'title',flex:2,
     filter: {type: 'string'},
     field: {allowBlank: false}
 },
 {header: 'Heading',dataIndex: 'heading',flex:1,filter: {type: 'string'}},
 {header: 'Meta Keyword',dataIndex: 'meta_keyword',flex:1,filter: {type: 'string'}},
 {header: 'Description',dataIndex: 'description',flex:1,filter: {type: 'string'}},
 {header: 'Page Url',dataIndex: 'url',flex:1,filter: {type: 'string'}},
 {header: 'Template',dataIndex: 'template_id',flex:1,
    filter: {
        type: 'list',                        
        options: filterTemplateArray,
        phpMode: true      
    },
    field: {
        xtype: 'combobox',
        typeAhead: false,                      
        store: templateStore,
        displayField: 'template_name',
        valueField: 'id',
        allowBlank: false
    }
 },
 {header: 'Language',dataIndex: 'lang',
     renderer:CMS.Util.renderLanguage,
     flex:1,
     filter: {
        type: 'list',                
        options: CMS.Util.tofilterListType(CMS.WEB_LANG,"code","name"),    
        phpMode: true        
    },
    field: {
            xtype: 'combobox',
            typeAhead: false,
            triggerAction: 'all',            
            store:languageStore,
            displayField: 'name',
            valueField: 'code'            
    }
},
 {header: 'Level',dataIndex: 'level',filter:{tyle:'numeric'}},
 {xtype: 'checkcolumn',header: 'Is Cache',dataIndex: 'is_cache',filter:{tyle:'bool'}},
 {xtype: 'checkcolumn',header: 'Status',dataIndex: 'status',filter:{tyle:'bool'},editor: {
    xtype: 'checkbox'   
 }}
];
//---------------------------------
var panel;
var grid;
Ext.onReady(function(){ 
    Ext.QuickTips.init();
    var filters = {
        ftype: 'filters',        
        encode: true, // json encode the filter query
        local: false   // defaults to false (remote filtering)        
    };    
    grid = Ext.create('Ext.grid.Panel', {        
        height:eval(Ext.getBody().getViewSize().height - CMS.globalGridConfig.gridHeight),  
        store: store,
        columns: columns,
        features: [filters],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        frame:true,
        loadMask: true,      
        tbar:myToolbar,
        selModel: {
            selType: 'cellmodel'
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 10,
            store: store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.ProgressBarPager',{})
        }),
        layout:'fit'        
    });
    panel =  Ext.create('Ext.Panel',{      
        width: 'auto',
        renderTo:'page_main_content',
        items: grid,
        layout:'fit',
        border:false        
    });    
    store.load();
   
});
 Ext.EventManager.onWindowResize(function(width,height){  
    grid.setHeight(eval(height - CMS.globalGridConfig.gridHeight));
    grid.setWidth('auto');
    panel.setWidth('auto');
});
//-------------------Render
